/*
 * @Author: Jimmy
 * @LastModifiedBy: Jimmy
 * @Date: 2024-03-07 20:52:59
 * @LastEditTime: 2024-06-22 20:37:51
 * @FilePath: /nest_study/web/src/components/showDictionary/index.tsx
 */
import { useEffect, useState } from 'react'
import styles from './index.module.scss'

interface IProps {
    list: Array<IStatus>
    label: string
    value: string | number
    type?: string
    isDot?: boolean
    extra?: string
    status?: string
}

interface IStatus {
    [key: string]: string | number
}

export default function ShowDictionary(props: IProps) {
    let { list, label = 'label', type = 'value', value, isDot = false, extra, status } = props;
    const [showItem, setShowItem] = useState<IStatus | any>({})
    useEffect(() => {
        let findItem = list.find((item) => item[type] == value);
        setShowItem(findItem)
    }, [])
    return (
        <div className={[styles.statusItem, styles[showItem.status || 'off'], status].join(' ')}>
            {
                isDot && <span className={styles.dotItem}></span>
            }
            <span className={styles.statusName}>{showItem[label]}{extra}</span>
        </div>
    )
}
